import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", redirect: "/home" },
    {
      path: "/home", name: "home", meta: { title: '首页' }, component: () => import("../views/Home.vue"),
      children: [
        { path: "clazz", name: "clazz", meta: { title: '上课专用' }, component: () => import("../views/Clazz.vue") },
        { path: "clazzE", name: "clazzE", meta: { title: '上课专用E' }, component: () => import("../views/ClazzE.vue") },
        { path: "test", name: "test", meta: { title: '测试' }, component: () => import("@/views/Test.vue") },
        {
          path: "book", name: "book", meta: { title: '课本练习' }, component: () => import("@/views/Book.vue"),
          children: [
            { path: 'a', name: 'a', meta: { title: '购物车' }, component: () => import("@/views/book/A.vue") },
            { path: 'b', name: 'b', meta: { title: '待办事项' }, component: () => import("@/views/book/B.vue") },
          ]
        },
        {
          path: "practise", name: "practise", meta: { title: '练习' }, component: () => import("@/views/Practise.vue"),
          children: [
            { path: '', name: 'vueyyjc', redirect: '/home/practise/vueyyjc' },
            { path: 'vueyyjc', name: 'vueyyjc', meta: { title: 'vue应用基础' }, component: () => import("../views/Vueyyjc.vue") },
            {
              path: 'flexbj', name: 'flexbj', meta: { title: 'flex布局' }, component: () => import("../views/Flexbj.vue"),
              children: [
                { path: 'flexbj', name: 'flexOne', redirect: '/home/practise/flexbj/flexOne' },
                { path: 'flexOne', name: 'flexOne', meta: { title: '第一题' }, component: () => import("../views/flexbj/FlexOne.vue") },
                { path: 'flexTwo', name: 'flexTwo', meta: { title: '第二题' }, component: () => import("../views/flexbj/FlexTwo.vue") },
                { path: 'flexThree', name: 'flexThree', meta: { title: '第三题' }, component: () => import("../views/flexbj/FlexThree.vue") },
                { path: 'flexFour', name: 'flexFour', meta: { title: '第四题' }, component: () => import("../views/flexbj/FlexFour.vue") },
                { path: 'flexFive', name: 'flexFive', meta: { title: '第五题' }, component: () => import("../views/flexbj/FlexFive.vue") },
                { path: 'flexSix', name: 'flexSix', meta: { title: '第六题' }, component: () => import("../views/flexbj/FlexSix.vue") },
                { path: 'flexSeven', name: 'flexSeven', meta: { title: '第七题' }, component: () => import("../views/flexbj/FlexSeven.vue") }
              ]
            },
            { path: 'computedlx', name: 'computedlx', meta: { title: '计算属性' }, component: () => import("../views/Computedlx.vue") },
            { path: 'watchlx', name: 'watchlx', meta: { title: '侦听器' }, component: () => import("../views/Watchlx.vue") },
            {
              path: 'ifforshow', name: 'ifforshow', meta: { title: '条件列表渲染' }, component: () => import("../views/Ifforshow.vue"),
              children: [
                { path: 'ifRender', name: 'ifRender', meta: { title: 'v-ifANDv-show' }, component: () => import("../views/v-ifORshowOrfor/IfRender.vue") },
                { path: 'vfor', name: 'vfor', meta: { title: 'vfor' }, component: () => import("@/views/v-ifORshowOrfor/Vfor.vue") },
              ]
            },
            {
              path: 'active', name: 'active', meta: { title: '样式渲染' }, component: () => import("@/views/Active.vue"),
              children: [
                { path: 'abasic', name: 'abasic', meta: { title: '基础练习题' }, component: () => import("@/views/active/ABasic.vue") },
                { path: 'amedium', name: 'amedium', meta: { title: '中等练习题' }, component: () => import("@/views/active/AMedium.vue") },
                { path: 'aadvanced', name: 'aadvanced', meta: { title: '进阶练习题' }, component: () => import("@/views/active/AAdvanced.vue") },
              ]
            },
            { path: 'eventlx', name: 'eventlx', meta: { title: '事件处理' }, component: () => import("@/views/Eventlx.vue") },
            { path: 'fromlx', name: 'fromlx', meta: { title: '表单绑定' }, component: () => import("@/views/Fromlx.vue") },
            { path: "comp", name: "comp", meta: { title: '组件基础' }, component: () => import("@/views/Comp.vue") },
          ]
        }
      ]
    },
  ]
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
})

export default router;
